<template>
  <div class="mdb-config-container">
    <!-- 步骤条 -->
    <el-steps :size="defaultFormItemSize" :active="activeStep" finish-status="success" simple>
      <el-step title="选择表" description="选择需要系统管理的数据库表"> </el-step>
      <el-step title="配置图层" description="配置图层基本信息"></el-step>
      <el-step title="配置字段" description="配置字段显示和操作属性"></el-step>
    </el-steps>

    <!-- 步骤一：选择表 -->
    <div v-show="activeStep === 0" class="step-container">
      <el-tag type="info">请选择需要系统管理的数据库表</el-tag>
      <div class="step-content">
        <el-table :data="allTables" style="width: 100%" max-height="400">
          <!-- 序号列 -->
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="tableName" label="表名"></el-table-column>
          <el-table-column prop="tableComment" label="表注释"></el-table-column>
          <!--          <el-table-column label="操作" width="120">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button-->
          <!--                size="mini"-->
          <!--                type="primary"-->
          <!--                @click="selectTable(scope.row)"-->
          <!--                :disabled="isSelected(scope.row.tableName)"-->
          <!--              >-->
          <!--                {{ isSelected(scope.row.tableName) ? '已选择' : '选择' }}-->
          <!--              </el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->

          <!-- 选择列 (Checkbox) -->
          <el-table-column prop="selected" label="选择" width="120">
            <template slot="header">
              <el-checkbox
                v-model="isSelectAll"
                @change="handleSelectAll"
              ></el-checkbox>全选
            </template>
            <template slot-scope="scope">
              <el-checkbox
                :value="isSelected(scope.row.tableName)"
                @change="val => handleCheckboxChange(val, scope.row)"
              >
              </el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="step-footer">
        <el-button
          :size="defaultFormItemSize"
          @click="nextStep"
          type="primary"
          :disabled="selectedLayers.length === 0"
          >下一步</el-button
        >
      </div>
    </div>

    <!-- 步骤二：配置图层 -->
    <div v-show="activeStep === 1" class="step-container">
      <el-tag type="info">配置数据表图层基本信息</el-tag>
      <div class="step-content">
        <vxe-table
          :data="selectedLayers"
          class="row-height-mini"
          ref="layerTable"
        >
          <vxe-column type="seq" width="60"></vxe-column>

          <vxe-column type="expand" width="40">
            <template #content="{ row }" >
              <div style="padding: 12px"
                   v-if="row.layerType === 'guandian'">
                <el-descriptions
                  class="myel-description"
                  :column="3"
                  size="mini"
                  border
                  labelClassName="myel-label"
                  content-class-name="myel-content"
                >
                  <el-descriptions-item label="管种字段： ">
                    <el-input
                      v-model="row.pipeTypeField"
                      size="mini"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="管点类型字段： ">
                    <template>
                      <el-input
                        v-model="row.dianCategoryField"
                        size="mini"
                      />
                    </template>
                  </el-descriptions-item>
                  <el-descriptions-item label="是否支持图片： ">
                    <template>
                      <el-switch
                        v-model="row.supportImage"
                        active-text="是"
                        :active-value="1"
                        :inactive-value="0"
                        :size="defaultFormItemSize"
                      />
                    </template>
                  </el-descriptions-item>
<!--                  <el-descriptions-item label="图片数量： ">-->
<!--                    <template>-->
<!--                      <el-input-->
<!--                        v-model="row.imageNumbers"-->
<!--                        size="mini"-->
<!--                      />-->
<!--                    </template>-->
<!--                  </el-descriptions-item>-->
                </el-descriptions>
              </div>
              <div style="padding: 12px"
                   v-if="row.layerType === 'guanxian'">
                <el-descriptions
                  class="myel-description"
                  :column="3"
                  size="mini"
                  border
                  labelClassName="myel-label"
                  content-class-name="myel-content"
                >
                  <el-descriptions-item label="管种字段： ">
                    <el-input
                      v-model="row.pipeTypeField"
                      size="mini"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="流向字段： ">
                    <template>
                      <el-input
                        v-model="row.flowDirectionField"
                        size="mini"
                      />
                    </template>
                  </el-descriptions-item>
                  <el-descriptions-item label="是否支持图片： ">
                    <template>
                      <el-switch
                        v-model="row.supportImage"
                        active-text="是"
                        :active-value="1"
                        :inactive-value="0"
                        :size="defaultFormItemSize"
                      />
                    </template>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </template>
          </vxe-column>
          <vxe-column
            field="tableName"
            title="数据库表名"
          ></vxe-column>
          <vxe-column field="displayName" title="显示图层名">
            <template slot-scope="scope">
              <el-input v-model="scope.row.displayName" size="mini" />
            </template>
          </vxe-column>
          <vxe-column field="layerType" title="图层类型">
            <template slot-scope="scope">
              <el-select
                :size="defaultFormItemSize"
                v-model="scope.row.layerType"
                placeholder=""
                :clearable="true"
                :filterable="true"
                @visible-change="layerTypeOptionsWidget.onVisibleChange"
              >
                <el-option
                  v-for="item in layerTypeOptionsWidget.dropdownList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </vxe-column>

          <vxe-column type="html"  title="<span class=green title='对应表中逻辑上的主键（不一定是物理主键）'>逻辑主键</span>" field="primaryKey">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.primaryKey"
                size="mini" />
            </template>
          </vxe-column>
          <vxe-column title="对应管点（线）表" field="relatedTable">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.relatedTable"
                size="mini"/>
            </template>
          </vxe-column>
          <vxe-column title="操作" width="100">
            <template #default="{ row }">
              <el-button :size="defaultFormItemSize" type="text" @click="removeLayer(row)">删除</el-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="step-footer">
        <el-button :size="defaultFormItemSize" @click="prevStep" type="primary">上一步</el-button>
        <el-button
          :size="defaultFormItemSize"
          @click="nextStep"
          type="primary"
          :disabled="selectedLayers.length === 0"
          >下一步</el-button
        >
      </div>
    </div>

    <!-- 步骤三：配置字段 -->
    <div v-show="activeStep === 2" class="step-container">
      <div class="step-content">
        <el-row :gutter="10">
          <!-- 左侧表列表 -->
          <el-col :span="4">
            <div class="table-list-container">
              <div class="table-list-title">图层列表</div>
              <el-menu :default-active="activeTable" @select="handleTableSelect" class="table-menu" :size="defaultFormItemSize">
                <el-menu-item
                  v-for="layer in selectedLayers"
                  :key="layer.tableName"
                  :index="layer.tableName"
                >
                  {{ layer.displayName || layer.tableName }}
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>

          <!-- 右侧字段配置 -->
          <el-col :span="20">
            <div class="field-config-container">
              <div class="field-config-title">{{ currentTableDisplayName }} 字段配置</div>
              <vxe-table
                class="row-height-mini" stripe
                :expand-config="expandConfig"
                show-overflow border
                :data="currentTableFields"
                :column-config="columnConfig"
                ref="fieldTable"
                height="500"
                @cell-click="handleFieldSelect"
              >
                <vxe-column type="expand" width="40">
                  <template #content="{ row }">
                    <div style="padding:12px">
                      <el-descriptions  class="myel-description" :column="3" size="mini" border labelClassName="myel-label" contentClassName="myel-content">
                        <!-- 当选择是编辑字段时显示的额外配置 -->
                          <el-descriptions-item label="控件类型： ">
                            <el-select
                              :size="defaultFormItemSize"
                              v-model="row.displayRule.inputType"
                              placeholder=""
                              :clearable="true"
                              :filterable="true"
                              @visible-change="controlTypeWidget.onVisibleChange"
                            >
                              <el-option
                                v-for="item in controlTypeWidget.dropdownList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                              />
                            </el-select>
                          </el-descriptions-item>

                        <el-descriptions-item label="数据字典： " v-if="row.displayRule.inputType === 'select_single'  || row.displayRule.validateRule === 'select_multi'  || row.displayRule.validateRule === 'cascader'">
                          <el-select
                            :size="defaultFormItemSize"
                            v-model="row.displayRule.selectOptions"
                            placeholder=""
                            :clearable="true"
                            :filterable="true"
                            @visible-change="dictTypeWidget.onVisibleChange"
                          >
                            <el-option
                              v-for="item in dictTypeWidget.dropdownList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                            />
                          </el-select>
                        </el-descriptions-item>

                        <el-descriptions-item label="是否必填： ">
                          <el-switch
                            v-model="row.displayRule.isRequired"
                            active-text="是"
                            :active-value="1"
                            :inactive-value="0">
                          </el-switch>
                        </el-descriptions-item>

                          <el-descriptions-item label="校验规则： " :span="2">
                            <el-select style="width: 100%;max-width: 100%!important;"
                              :size="defaultFormItemSize" multiple width="100%"
                              v-model="row.displayRule.validateRule"
                              placeholder=""
                              :clearable="true"
                              :filterable="true"
                              @visible-change="validateRuleWidget.onVisibleChange"
                            >
                              <el-option
                                v-for="item in validateRuleWidget.dropdownList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                              />
                            </el-select>
                          </el-descriptions-item>

                          <el-descriptions-item label="最大值： " v-if="row.displayRule.validateRule.includes('maxValue') || row.displayRule.validateRule.includes('number') || row.displayRule.validateRule.includes('integer')">
                            <el-input v-model="row.displayRule.validateMaxValue" type="number" size="mini"></el-input>
                          </el-descriptions-item>

                          <el-descriptions-item label="最小值： " v-if="row.displayRule.validateRule.includes('minValue') || row.displayRule.validateRule.includes('number') || row.displayRule.validateRule.includes('integer')">
                              <el-input v-model="row.displayRule.validateMinValue" type="number" size="mini"></el-input>
                          </el-descriptions-item>

                        <el-descriptions-item label="最大长度： " v-if="row.displayRule.validateRule.includes('maxLength')">
                          <el-input v-model="row.displayRule.validateMaxLength" type="integer" size="mini"></el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="最小长度： " v-if="row.displayRule.validateRule.includes('minLength')">
                          <el-input v-model="row.displayRule.validateMinLength" type="integer" size="mini"></el-input>
                        </el-descriptions-item>

                          <el-descriptions-item label="正则表达式： " v-if="row.displayRule.validateRule.includes('regex')">
                               <el-input v-model="row.displayRule.validatePattern" size="mini"></el-input>
                          </el-descriptions-item>

<!--                        <el-descriptions-item label="是否依赖其他字段： ">-->
<!--                          <el-switch-->
<!--                            v-model="row.displayRule.hasDependRelation"-->
<!--                            active-text="是"-->
<!--                            :active-value="1"-->
<!--                            :inactive-value="0">-->
<!--                          </el-switch>-->
<!--                        </el-descriptions-item>-->

<!--                          <el-descriptions-item label="依赖表达式： " v-if="row.displayRule.hasDependRelation === 1">-->
<!--                              <el-input v-model="row.displayRule.dependRelation" size="mini"></el-input>-->
<!--                          </el-descriptions-item>-->
                      </el-descriptions>
                    </div>

                  </template>
                </vxe-column>
                <vxe-column
                  field="name"
                  title="字段名" min-width="100"
                ></vxe-column>
                <vxe-column
                  field="storageType"
                  title="数据类型" min-width="100"
                ></vxe-column>
<!--                <vxe-column-->
<!--                  field="fieldLength" min-width="100"-->
<!--                  title="长度"-->
<!--                ></vxe-column>-->
                <vxe-column
                  field="displayName" min-width="200"
                  title="显示名"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.displayName" :size="defaultFormItemSize"></el-input>
                  </template>
                </vxe-column>
                <vxe-column field="isLabel" title="是否是注记" min-width="100">
                  <template #default="{ row }">
                    <el-switch
                      v-model="row.isLabelField"
                      active-text="是"

                      :active-value="1"
                      :inactive-value="0">
                    </el-switch>
                  </template>
                </vxe-column>
                <vxe-column field="isPopup" title="是否弹窗显示" min-width="100">
                  <template #default="{ row }">
                    <el-switch
                      v-model="row.isPopupDescField"
                      active-text="是"

                      :active-value="1"
                      :inactive-value="0">
                    </el-switch>
                  </template>
                </vxe-column>
                <vxe-column field="isList" title="是否列表显示" min-width="100">
                  <template #default="{ row }">
                    <el-switch
                      v-model="row.isListDescField"
                      active-text="是"

                      :active-value="1"
                      :inactive-value="0">
                    </el-switch>
                  </template>
                </vxe-column>
                <vxe-column field="isQuery" title="是否查询字段" min-width="100">
                  <template #default="{ row }">
                    <el-switch
                      v-model="row.isSearchField"
                      active-text="是"
                      :active-value="1"
                      :inactive-value="0">
                    </el-switch>
                  </template>
                </vxe-column>
                <vxe-column field="isEditField" title="是否支持编辑" min-width="100">
                  <template #default="{ row }">
                    <el-switch
                      v-model="row.isEditField"
                      active-text="是"
                      :active-value="1"
                      :inactive-value="0">
                    </el-switch>
                  </template>
                </vxe-column>
<!--                <vxe-column field="isEdit" title="是否编辑字段" min-width="100">-->
<!--                  <template #default="{ row }">-->
<!--                    <vxe-select v-model="row.isEdit" :options="yesNoOptions"></vxe-select>-->
<!--                  </template>-->
<!--                </vxe-column>-->
<!--                <vxe-column field="isImage" title="是否图片字段" min-width="100">-->
<!--                  <template #default="{ row }">-->
<!--                    <vxe-select v-model="row.isImage" :options="yesNoOptions"></vxe-select>-->
<!--                  </template>-->
<!--                </vxe-column>-->
                <vxe-column title="操作" width="100" min-width="100">
                  <template #default="{ row }">
                    <el-button type='text' @click="removeField(row)">删除</el-button>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="step-footer">
        <el-button :size="defaultFormItemSize" @click="prevStep" type="primary">上一步</el-button>
        <el-button :size="defaultFormItemSize" @click="saveConfig" type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { DictionaryController } from '@/api';
import { DropdownWidget } from '@/utils/widget';

import { LayerDefineController } from '@/api';

export default {
  name: 'importMdbTables',
  props: {
    projectTemplateId: {
      default: undefined
    },
    mdbMetaData: {
      type: Object
    }
  },
  data() {
    return {
      activeStep: 0,
      allTables: [], // 所有数据库表
      selectedLayers: [], // 选中的图层
      tableFields: {}, // 每个表的字段信息
      activeTable: '', // 当前选中的表
      selectedField: null, // 当前选中的字段

      selectedRows: [], // 已选中的行
      isSelectAll: false, // 全选状态

      layerTypeOptionsWidget: new DropdownWidget(this.loadLayerTypeDropdownList),
      yesNoOptionsWidget: new DropdownWidget(this.loadYesNoDropdownList),
      controlTypeWidget: new DropdownWidget(this.loadControlTypeDropdownList),
      dictTypeWidget: new DropdownWidget(this.loadDictNameDropdownList),
      validateRuleWidget: new DropdownWidget(this.loadValidateRuleDropdownList),
      // 是/否选项
      yesNoOptions: [
        { label: '是', value: '是' },
        { label: '否', value: '否' }
      ],
      expandConfig:{
        showIcon: true,
        iconOpen: 'el-icon-arrow-down',
        iconClose: 'el-icon-arrow-right',
        visibleMethod({ row }) {
          return (row.isEditField === 1)
        }
      },
       columnConfig : {
        resizable: true
      },
    };
  },

  computed: {
    currentTableFields() {
      if (!this.activeTable) return [];
      return this.tableFields[this.activeTable] || [];
    },

    currentTableDisplayName() {
      const layer = this.selectedLayers.find(l => l.tableName === this.activeTable);
      return layer ? layer.displayName || layer.tableName : '';
    }
  },

  methods: {
    // 全选/取消全选处理
    handleSelectAll(val) {
      if (val) {
        // 全选
        this.allTables.forEach(table => {
          if (!this.isSelected(table.tableName)) {
            this.selectTable(table);
          }
        });
      } else {
        // 取消全选
        [...this.selectedLayers].forEach(layer => {
          const table = this.allTables.find(t => t.tableName === layer.tableName);
          if (table) {
            this.deselectTable(table);
          }
        });
      }
    },

    // 处理checkbox选择变化
    handleCheckboxChange(val, row) {
      if (val) {
        this.selectTable(row);
      } else {
        this.deselectTable(row);
      }
      // 更新全选状态
      this.updateSelectAllState();
    },


    // 更新全选状态
    updateSelectAllState() {
      this.isSelectAll = this.selectedLayers.length > 0 &&
        this.selectedLayers.length === this.allTables.length;
    },

    // 选择表
    selectTable(table) {
      // 检查是否已选择
      if (this.isSelected(table.tableName)) return;

      // 添加到选中列表
      const layer = {
        // 项目模板ID
        projectTemplateId: this.projectTemplateId,
        tableName: table.tableName,
        // 对应MDB的数据库表名
        mdbTableName: table.tableName,
        displayName: table.tableComment || table.tableName,
        layerType: table.layerType,
        primaryKey: table.primaryKey || '',
        relatedTable: table.relatedTable || '',
        supportImage: table.layerType === 'guandian' ? 1 : 0,
        imageNumbers: 3,
        pipeTypeField: 'CODE',
        flowDirectionField: 'FlowDirect',
        dianCategoryField: 'FEATURE,SUBSID',
        // 显示顺序，默认是1
        displayOrder: 1,
        // 是否默认显示
        isVisible: 1,
      };
      this.selectedLayers.push(layer);

      // 更新全选状态
      this.updateSelectAllState();
      // 不再在这里初始化字段配置
      // 字段配置将在保存时初始化或在字段配置步骤中处理
    },

    // 取消选择表
    deselectTable(table) {
      const index = this.selectedLayers.findIndex(layer => layer.tableName === table.tableName);
      if (index > -1) {
        this.selectedLayers.splice(index, 1);
        // 清理字段配置（如果存在）
        this.$delete(this.tableFields, table.tableName);

        // 如果取消选择的是当前选中表，重置选中
        if (this.activeTable === table.tableName) {
          this.activeTable = this.selectedLayers.length > 0 ? this.selectedLayers[0].tableName : '';
        }
        // 更新全选状态
        this.updateSelectAllState();
      }
    },
    // 选择表处理函数
    handleTableSelect(tableName) {
      this.activeTable = tableName;
      // 如果该表的字段还未初始化，则进行初始化
      if (!this.tableFields[tableName]) {
        this.initializeTableFields(tableName);
      }
    },

    // 在适当的时候初始化字段配置（如进入字段配置步骤时）
    initializeTableFields(tableName) {
      // 只有当该表的字段配置尚未初始化时才进行初始化
      if (!this.tableFields[tableName]) {
        const table = this.allTables.find(t => t.tableName === tableName);
        if (table) {
          this.$set(
            this.tableFields,
            tableName,
            table.fields.map(field => ({
              // 编辑规则字段
              fieldId: undefined,
              layerId: undefined,
              name: field.fieldName,
              displayName: field.fieldComment || field.fieldName,
              storageType: field.fieldType || 'VARCHAR',
              fieldLength: field.fieldLength || 255,
              displaySort: 1,
              exportName: '',
              isLabelField: 0,
              isPopupDescField: 0,
              isListDescField: 0,
              isSearchField: 0,
              isEditField: 0,
              isRequired: 0,
              // isSearchField: 0,
              // controlType: 'string',
              displayRule: {
                isRequired: 0,
                inputType: 'input',
                selectOptions: undefined,
                checkStrictly: 0,
                uploadMaxNumber: undefined,
                uploadImgMaxSize: undefined,
                uploadFileSuffix: '',
                validateRule: [],
                validateMaxValue: undefined,
                validateMinValue: undefined,
                validateMaxLength: undefined,
                validateMinLength: undefined,
                validatePattern: '',
                hasDependRelation: 0,
                dependRelation: ''
              },
            }))
          );
        }
      }
    },
    // 检查表是否已选择
    isSelected(tableName) {
      return this.selectedLayers.some(layer => layer.tableName === tableName);
    },

    // 移除图层
    removeLayer(layer) {
      this.$confirm('确定要删除该图层吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const index = this.selectedLayers.findIndex(l => l.tableName === layer.tableName);
          if (index > -1) {
            this.selectedLayers.splice(index, 1);
            // 清理字段配置
            this.$delete(this.tableFields, layer.tableName);

            // 如果删除的是当前选中表，重置选中
            if (this.activeTable === layer.tableName) {
              this.activeTable =
                this.selectedLayers.length > 0 ? this.selectedLayers[0].tableName : '';
            }
          }
          this.$message.success('删除成功');
        })
        .catch(() => {});
    },

    // 移除字段
    removeField(field) {
      this.$confirm('确定要删除该字段吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const fields = this.tableFields[this.activeTable];
          if (fields) {
            const index = fields.findIndex(f => f.fieldName === field.fieldName);
            if (index > -1) {
              fields.splice(index, 1);
              // 如果删除的是当前选中的字段，清空选中
              if (this.selectedField && this.selectedField.fieldName === field.fieldName) {
                this.selectedField = null;
              }
            }
          }
          this.$message.success('删除成功');
        })
        .catch(() => {});
    },

    // 选择字段显示编辑规则
    handleFieldSelect({ row }) {
      this.selectedField = row;
    },

    // 下一步
    nextStep() {
      if (this.activeStep === 0) {
        this.selectedLayers.forEach(layer => {
          this.initializeTableFields(layer.tableName);
        });

        // 设置默认激活的表（如果还没有设置）
        if (!this.activeTable && this.selectedLayers.length > 0) {
          this.activeTable = this.selectedLayers[0].tableName;
        }
      }

      if (this.activeStep < 2) {
        this.activeStep++;
      }
    },

    // 上一步
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    },

    // 取消
    cancel(isSuccess = false, data = null) {
      if (!isSuccess) {
        this.$confirm('确定要取消配置吗？未保存的更改将会丢失', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            if (this.observer != null) {
              this.observer.cancel(isSuccess, data);
            }
          })
          .catch(() => {});
      }
      else {
        if (this.observer != null) {
          this.observer.cancel(isSuccess, data);
        }
      }
    },

    // 保存配置
    saveConfig() {
      // 验证数据
      if (this.selectedLayers.length === 0) {
        this.$message.warning('请至少选择一个图层');
        return;
      }

      // 构造保存数据
      const saveData = {
        layerDefineDtos: this.selectedLayers,
        layerFieldMap: this.tableFields
      };

      LayerDefineController.batchAdd(this, saveData).then(res => {
        this.$message.success('配置保存成功');
        this.cancel(true)
      }).catch(e => {
        this.$message.error('配置保存失败');
      })
    },
    /**
     * 模板名称下拉数据获取函数
     */
    loadLayerTypeDropdownList() {
      return new Promise((resolve, reject) => {
        const params = {
          dictCode: "LayerType"
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            resolve(res.getList());
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    loadYesNoDropdownList() {
      return new Promise((resolve, reject) => {
        const params = {};
        DictionaryController.dictYesNoDict(this, params)
          .then(res => {
            resolve(res.getList());
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    loadValidateRuleDropdownList() {
      return new Promise((resolve, reject) => {
        const params = {};
        DictionaryController.dictCustomValidateRuleDict(this, params)
          .then(res => {
            resolve(res.getList());
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    loadControlTypeDropdownList() {
      return new Promise((resolve, reject) => {
        const params = {};
        DictionaryController.dictCustomControlTypeDict(this, params)
          .then(res => {
            resolve(res.getList());
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    /**
     * 字典名称下拉数据获取函数
     */
    loadDictNameDropdownList() {
      return new Promise((resolve, reject) => {
        const params = {
        };
        DictionaryController.dictPmDict(this, params).then(res => {
          resolve(res.getList());
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 初始化数据（模拟接口调用）
    async init() {

      this.yesNoOptionsWidget.onVisibleChange(true).catch(e => {});
      this.layerTypeOptionsWidget.onVisibleChange(true).catch(e => {});
      this.controlTypeWidget.onVisibleChange(true).catch(e => {})
      this.validateRuleWidget.onVisibleChange(true).catch(e => {})
      this.dictTypeWidget.onVisibleChange( true).catch(e => {})

      try { // 使用从props传入的mdbMetaData数据
        if (this.mdbMetaData ) {
          this.allTables = this.mdbMetaData;
          return
        }
        // 模拟获取所有表数据
        this.allTables = [
          {
            tableName: 'POINT_TABLE',
            tableComment: '点要素表',
            fields: [
              { fieldName: 'ID', fieldType: 'INTEGER', fieldLength: 10, fieldComment: '唯一标识' },
              { fieldName: 'NAME', fieldType: 'VARCHAR', fieldLength: 100, fieldComment: '名称' },
              { fieldName: 'X', fieldType: 'DOUBLE', fieldLength: 0, fieldComment: 'X坐标' },
              { fieldName: 'Y', fieldType: 'DOUBLE', fieldLength: 0, fieldComment: 'Y坐标' }
            ]
          },
          {
            tableName: 'LINE_TABLE',
            tableComment: '线要素表',
            fields: [
              { fieldName: 'ID', fieldType: 'INTEGER', fieldLength: 10, fieldComment: '唯一标识' },
              { fieldName: 'NAME', fieldType: 'VARCHAR', fieldLength: 100, fieldComment: '名称' },
              { fieldName: 'LENGTH', fieldType: 'DOUBLE', fieldLength: 0, fieldComment: '长度' },
              { fieldName: 'S_POINT', fieldType: 'VARCHAR', fieldLength: 50, fieldComment: '起点' },
              { fieldName: 'E_POINT', fieldType: 'VARCHAR', fieldLength: 50, fieldComment: '终点' }
            ]
          },
          {
            tableName: 'POLYGON_TABLE',
            tableComment: '面要素表',
            fields: [
              { fieldName: 'ID', fieldType: 'INTEGER', fieldLength: 10, fieldComment: '唯一标识' },
              { fieldName: 'NAME', fieldType: 'VARCHAR', fieldLength: 100, fieldComment: '名称' },
              { fieldName: 'AREA', fieldType: 'DOUBLE', fieldLength: 0, fieldComment: '面积' }
            ]
          }
        ];
      } catch (error) {
        this.$message.error('获取表数据失败: ' + error.message);
      }
    }
  },

  mounted() {
    this.init();
  }
};
</script>

<style scoped>
.mdb-config-container {
  background: #fff;
  border-radius: 4px;
}

.step-container {
  margin-top: 5px;
}

.step-content {
  min-height: 400px;
  padding: 5px 0;
}

.step-footer {
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

.table-list-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  height: 100%;
}

.table-list-title {
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
  font-weight: bold;
  background-color: #f5f7fa;
}

.table-menu {
  border: solid 1px #F8F8F8;
  background: white!important;
  color: #1B1C1D !important;
}

.table-menu .el-menu-item {
  color: #1B1C1D !important;
  line-height: 40px;
  height: 40px;
}
.table-menu .el-menu-item.is-active{
  color: #409eff !important;
  background: #ecf6fd  !important;
}
.table-menu .el-menu-item:hover{
  background: #ecf6fd !important;
}
.field-config-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  height: 100%;
}

.field-config-title {
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
  font-weight: bold;
  background-color: #f5f7fa;
}

.field-rule-container {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.rule-title {
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.el-checkbox {
  margin-right: 15px;
  margin-bottom: 5px;
}

.row-height-mini ::v-deep .vxe-body--column {
  height: 35px !important;
}

::v-deep .myel-label {
  background: #E1F3D8 !important;
  width: 120px !important;
  text-align: right !important;
}
::v-deep .myel-content {
  width: 20% !important;
  max-width: 30% !important;
  text-align: left !important;
}
.myel-description {
  margin-right: 30px;
  margin-left: 80px;
}
</style>
